<!--
  Copyright 2009 Jeremie Tisseau
  "Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:
  http://www.gnu.org/licenses/gpl-3.0.html
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Fotometria Solar - Gráficos e Medidas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/media/css/reset.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="/media/css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/media/css/slide.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="/media/css/jquery.jqplot.css" type="text/css" />

    <!-- PNG FIX for IE6 -->
    <!-- http://24ways.org/2010/supersleight-transparent-png-in-ie6 -->
    <!--[if lte IE 6]>
    <script type="text/javascript" src="/media/js/pngfix/supersleight-min.js"></script>
    <![endif]-->

    <script src="/media/js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="/media/js/slide.js" type="text/javascript"></script>
    
    <!--[if IE]><script type="text/javascript" src="/media/js/excanvas.js"></script><![endif]-->
    
    <!-- BEGIN: load jqplot -->
    <script type="text/javascript" src="/media/js/jquery.jqplot.js"></script>
    <!-- <script type="text/javascript" src="/media/js/customCandlestick.js" contentType: 'application/x-www-form-urlencoded; charset=UTF-8'></script> -->
    <script type="text/javascript" src="/media/js/plugins/jqplot.logAxisRenderer.js"></script>
    <script type="text/javascript" src="/media/js/plugins/jqplot.dateAxisRenderer.js"></script>
    <script type="text/javascript" src="/media/js/plugins/jqplot.highlighter.js"></script>
    <script type="text/javascript" src="/media/js/plugins/jqplot.cursor.js"></script>
    <!-- END: load jqplot -->
    
    <script type="text/javascript" charset="utf-8"> 
    function FilterModels() { 
        var makeslist = document.getElementById('makes'); 
        var modelslist = document.getElementById('models'); 
        var make_id = makeslist.options[makeslist.selectedIndex].value; 
        var modelstxt = new Array(); 
        modelstxt[1] = "1\tEscort\n2\tTaurus"; 
        modelstxt[2] = "1\tAltima\n2\tMaxima"; 
        var models = modelstxt[make_id].split("\n"); 
        for (var count = modelslist.options.length-1; count >-1; count--){ 
            modelslist.options[count] = null; 
        } 
        for (i=0; i<models.length; i++){ 
            var modelvals = models[i].split("\t"); 
            var option = new Option(modelvals[1], modelvals[2], false, false); 
            modelslist.options[modelslist.length] = option; 
        } 
    } 
    </script> 
    
  </head>

  <body>
    <!-- Panel -->
    <div id="toppanel">
      <div id="panel">
        <div class="content clearfix">
          <div class="left">
            <h1>Seja Bem Vindo!</h1>
            <p>O sistema de Fotometria Solar traz para você, todas as medidas que ocorrem durante cada dia do ano.</p>
            <p>Sinta-se a vontade para consultar e navegar no nosso site!</p>
            <br/>
            <strong>(Para um melhor acompanhamento das medidas diárias, sugerimos que você efetue seu cadastro!)</strong>
          </div>
          <div class="left">
            <!-- Login Form -->
            <form class="clearfix" action="#" method="post">
              <fieldset>
                <h1>Login de Usuário</h1>
                <label class="grey" for="log">Usuário:</label>
                <input class="field" type="text" name="log" id="log" value="" size="23" />
                <label class="grey" for="pwd">Senha:</label>
                <input class="field" type="password" name="pwd" id="pwd" size="23" />
                <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> &nbsp;Lembre-me</label>
                <div class="clear"></div>
                <input type="submit" name="submit" value="Login" class="bt_login" />
                <a class="lost-pwd" href="#">Esqueceu a senha?</a>
              </fieldset>
            </form>
          </div>
          <div class="left right">			
            <!-- Register Form -->
            <form action="#" method="post">
              <fieldset>
                <h1>Cadastre-se!</h1>				
                <label class="grey" for="signup">Usuário:</label>
                <input class="field" type="text" name="signup" id="signup" value="" size="23" />
                <label class="grey" for="email">Email:</label>
                <input class="field" type="text" name="email" id="email" size="23" />
                <label>* Uma senha será enviada ao seu email.</label>
                <input type="submit" name="submit" value="Register" class="bt_register" />
              </fieldset>
            </form>
          </div>
        </div>
      </div> <!-- /login -->	

      <!-- The tab on top -->	
      <div class="tab">
        <ul class="login">
          <li class="left">&nbsp;</li>
          <li>Olá Visitante!</li>
          <li class="sep">|</li>
          <li id="toggle">
            <a id="open" class="open" href="#">Login | Cadastro</a>
            <a id="close" style="display: none;" class="close" href="#">Fechar Painel</a>			
          </li>
          <li class="right">&nbsp;</li>
        </ul> 
      </div> <!-- / top -->
      
    </div> <!--panel -->
    
    <div class="section">
      <div class="contents">
      
      {% block corpo %}
      
        <div id="graph1" class="box">
          <h1>Temperatura - {{ temperatura.datahora.date }}</h1>
          <img src="/media/graficos/graficoTemperatura.png">
        </div>
        <div id="graph2" class="box">
          <h1>Umidade - {{ umidade.datahora.date }}</h1>
          <img src="/media/graficos/graficoUmidade.png">
        </div>
        <div id="graph3" class="box">
          <h1>Radiacao - {{ radiacao.datahora.date }}</h1>
          <img src="/media/graficos/graficoRadiacao.png">
        </div>
        
        <div id="formSearch" class="box">
		
          <form action="buscar_grafico/ " method ="">
            <legend>Temperatura:</legend>
            {{ form.valor }}
            <select class="tipo">
              <option selected>Tipo</option>
              <option value="max">Máximo</option>
              <option value="min">Minimo</option>
            </select>
            <input type="submit" class="button" value="Ir" />
          </form>
          
          <form action="buscar_grafico/ " method ="">
            <legend>Umidade Relativa:</legend>
            {{ form.valor2 }}
            <select class="tipo">
              <option selected>Tipo</option>
              <option value="max">Máximo</option>
              <option value="min">Minimo</option>
            </select>
            <input type="submit" class="button" value="Ir" />
          </form>
          
          <form action="buscar_grafico/ " method ="">
            <legend>Intensidade de Radiação Solar:</legend>
            {{ form.valor3 }}
            <select class="tipo">
              <option selected>Tipo</option>
              <option value="max">Máximo</option>
              <option value="min">Minimo</option>
            </select>
            <input type="submit" class="button" value="Ir" />
          </form>
          
        </div><!-- form -->
        
      {% endblock %}
        
      </div> <!-- contents -->
      
    </div> <!-- section -->
    
    <div id="footer">
      <div class="contents"></div>
    </div><!-- footer -->
    
  </body>
  
</html>
